/*
 * @作者: 京涛
 * @时间: 2020-09-11 10:41:39
 * @最后修改时间: 2020-09-11 17:27:25
 * @FilePath: \曲美家具项目\js\liveStyle.js
 * @项目名称: 每天都要记得写代码啊！
 */


$(document).ready(function () {
  /**
   * 生活方式轮播图
   */
  // 定时器
  //每5秒钟切换一次图片
  var styBannerIndex = 1;
  var styBannerInterval = setInterval(function () {
    //每5秒钟给图片添加一个显示，然后给上一个图添加一个消失
    styBanner(styBannerIndex, styBannerIndex - 1);
    styBannerIndex++;
    if (styBannerIndex == 8) {
      styBannerIndex = 0;
    }
  }, 5000);
  //封装图片切换、文字切换、点的切换的方法
  function styBanner(styBannerIndexTemp, disappearIndex) {
    if (styBannerIndexTemp == 8) {
      styBannerIndexTemp = 0;
    }
    if (disappearIndex == -1) {
      disappearIndex = 7;
    }
    //这一步需要遍历，因为点击下面的点的时候。需要取消当前点对应图片的显示，去消除定时器轮播带来的显示缓存(点击第1张，此时正在第5张，那么第1、5张都会有显示的属性。试着在点击的时候清除当前的显示属性，发现点击过快会导致之前的索引+1造成混乱。也可以在记录点击事件的次数，判断移除显示属性的时候是否将索引-1，第一次点击不-1，之后的点击都需要-1)
    $(".styBannerImg").each(function () {
      $(this).removeClass("appearStyBannerImg")
      if ($(this).index() == styBannerIndexTemp) {
        $(this).addClass("appearStyBannerImg")
      }
    })
    // $(".styBannerImg").eq(styBannerIndexTemp).addClass("appearStyBannerImg");
    setTimeout(function () {
      $(".styBannerImg").eq(styBannerIndexTemp).removeClass("appearStyBannerImg");
    }, 5000)
    // $(".styBannerImg").eq(disappearIndex).addClass("disappearStyBannerImg")
    $(".styBannerImg").each(function () {
      $(this).removeClass("disappearStyBannerImg")
      if ($(this).index() == disappearIndex) {
        $(this).addClass("disappearStyBannerImg")
      }
    })
    setTimeout(function () {
      $(".styBannerImg").eq(disappearIndex).removeClass("disappearStyBannerImg")
    }, 500)
    //每次切换图片都给对应的h3中的span 以及 h4中的i标签赋值一个transition-delay
    $(".styText").eq(styBannerIndexTemp).find("h3 span").each(function () {
      $(this).css({
        "transition-delay": Math.random().toFixed(1) + "s"
      });
    })
    $(".styText").eq(styBannerIndexTemp).find("h4 i").each(function () {
      $(this).css({
        "transition-delay": Math.random().toFixed(1) + "s"
      });
    })
    //每次切换图片则显示不同的文字
    $(".styText").each(function () {
      $(this).removeClass("styAppearText");
      if ($(this).index() == styBannerIndexTemp) {
        $(this).addClass("styAppearText");
      }
    });
    //每次切换显示对应的点
    $(".styBannerDian i").each(function () {
      $(this).removeClass("currentDian");
      if ($(this).index() == styBannerIndexTemp) {
        $(this).addClass("currentDian");
      }
    });
  }
  //当文档加载的时候给线添加动态
  $(".styBannerTextMain").addClass("lineLoad");
  //当文档加载的时候给第一张图添加动态
  $(".styBannerImg").eq(0).addClass("appearStyBannerImg");
  //当文档加载的时候给第一张图的文字添加动态
  $(".styText").eq(0).addClass("styAppearText")
  //当文档加载的时候给第一个点添加样式
  $(".styBannerDian i").eq(0).addClass("currentDian");
  setTimeout(function () {
      //轮播刚开始的时候清除第一张的默认显示
      $(".styBannerImg").eq(0).removeClass("appearStyBannerImg");
      //轮播刚开始的时候清除第一张的文字显示
      $(".styText").eq(0).removeClass("styAppearText")
    },
    5000)
  //最开始的时候先给第一组文字设置延时
  $(".styText").eq(0).find("h3 span").each(function () {
    $(this).css({
      "transition-delay": Math.random().toFixed(1) + "s"
    });
  })
  $(".styText").eq(0).find("h4 i").each(function () {
    $(this).css({
      "transition-delay": Math.random().toFixed(1) + "s"
    });
  })
  //点击下面的点对应显示相应的图片
  $(".styBannerDian i").each(function () {
    $(this).click(function () {
      if ($(this).index() != styBannerIndex - 1) {
        clearInterval(styBannerInterval);

        styBanner($(this).index(), styBannerIndex - 1);
        styBannerIndex = $(this).index() + 1;
        setTimeout(function () {
          styBannerInterval = setInterval(function () {
            if (styBannerIndex == 8) {
              styBannerIndex = 0;
            }
            //每5秒钟给图片添加一个显示，然后给上一个图添加一个消失
            styBanner(styBannerIndex, styBannerIndex - 1);
            styBannerIndex++;
          }, 5000);
        }, 100)
      }
    })
  })
})